<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">菜单管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 100px;">
						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-add">添加</button>
							<button type="button" class="btn btn-default btn-update">修改</button>
						</div>
					</div>
				</div>

			</div>
			<!-- /.box-header -->
		<div class="box-body table-responsive no-padding">
          <table id="menuTable" class="table table-hover">
        	<thead>
	        <tr>
		      <th data-field="selectItem" data-checkbox="true"></th>
	        </tr>
	       </thead>
	       
         </table>
        </div>
		</div>
		<!-- /.box -->
	</div>
</div>

<script type="text/javascript">
/**
 * 初始化表格的列
 */
var columns = [
{
	field : 'selectItem',
	radio : true
},
{
	title : '菜单ID',
	field : 'id',
	align : 'center',
	valign : 'middle',
	width : '100px'
},
{
	title : '菜单名称',
	field : 'name',
	align : 'center',
	valign : 'middle',
	width : '130px'
},
{
	title : '上级菜单',
	field : 'parentName',
	align : 'center',
	valign : 'middle',
	sortable : true,
	width : '100px'
},
{
	title : '类型',
	field : 'type',
	align : 'center',
	valign : 'middle',
	width : '70px',
	formatter : function(item, index) {
		if (item.type == 1) {
			return '<span class="label label-success">菜单</span>';
		}
		if (item.type == 2) {
			return '<span class="label label-warning">按钮</span>';
		}
	}
}, 
{
	title : '排序号',
	field : 'sort',
	align : 'center',
	valign : 'middle',
	sortable : true,
	width : '70px'
}, 
{
	title : '菜单URL',
	field : 'url',
	align : 'center',
	valign : 'middle',

	width : '160px'
}, 
{
	title : '授权标识',//要显示的标题名称
	field : 'permission',//json串中的key
	align : 'center',//水平居中
	valign : 'middle',//垂直居中
	sortable : false //是否排序
} ];//格式来自官方demos -->treeGrid(jquery扩展的一个网格树插件)
$(function(){
	doGetObjects();
	$(".input-group-btn")
    .on("click",".btn-add,.btn-update",doLoadEditUI);
})
function doLoadEditUI(){
	debugger
	//异步加载编辑页面
	let editUrl="/modules/sys/menu_edit.html";
	//基于点击对象的class属性值,修改标题
	if($(this).hasClass("btn-add")){
		$("#mainContentId").load(editUrl,()=>$(".box-title").html("添加菜单"));
	}else{
		let id=$("tbody input:radio:checked").val();
		let findByIdUrl=`${baseUrl}/menu/${id}`;
		$.ajax({url:findByIdUrl,crossDomain:true,xhrFields:{withCredentials: true},success(result){
			if(result.state==1){
				result.data.id=id;//在结果中动态追加id
				$("#mainContentId").data("rowData",result.data);
				$("#mainContentId").load(editUrl,()=>$(".box-title").html("修改菜单"));
			}else{
				alert(result.message);
			}
		}});
	}
}
function doGetObjects(){
	//移除mainContentId位置的数据
	$("#mainContentId").removeData();
	let treeTable=new TreeTable(
				"menuTable",//tableId
				`${baseUrl}/menu/`,//url
				 columns);//表中列的配置
	//treeTable.setExpandColumn(2);
	//做表格初始化
	//debugger
	treeTable.init();//发起ajax请求(借助ajax函数)
}
</script>